import React from 'react';
import {numberHandle} from '~/utils/number';
import CommonEchart from '../../../common/CommonEchart';

const precision = 2;

const tooltipCallback = params => {
    const {name = '', data: {refund_order_number = '', value = ''} = {}, percent} = params;
    return `${name}<br/>金额:${numberHandle(value, precision)}<br/>订单数:${numberHandle(
        refund_order_number,
        precision
    )}<br/>占比:${percent}%`;
};

const labelFormatter = params => {
    const {name, percent} = params;
    if (percent < 5) {
        return;
    }

    return `${name}: ${percent}%`;
};

const extendOptions = {
    chartId: 'RefundSourcePieChart',
    tooltip: {
        trigger: 'item',
        formatter: tooltipCallback
    },
    legend: {
        orient: 'vertical',
        left: 'right',
        top: 'middle',
        type: 'scroll',
        align: 'left'
    },
    series: {
        common: {
            radius: '40%',
            center: ['40%', '50%'],
            label: {show: true, fontSize: 12, formatter: labelFormatter},
            // emphasis: {
            //     itemStyle: {
            //         shadowBlur: 10,
            //         shadowOffsetX: 0,
            //         shadowColor: 'rgba(0, 0, 0, 0.5)'
            //     }
            // }
        }
    }
};

const RefundSourcePieChart = props => (
    <CommonEchart {...props} extendEchartsOptions={extendOptions} />
);

export default RefundSourcePieChart;
